<style lang="scss">
</style>
<template>
  <div class="app-container">
    <div class="header-count">
      <p>问题账号实时数据</p>
      <div class="data-count">
        <div class="data-count-item">
          <div class="data-count-item-left">
            <img src="../../../assets/home/yishouyichang.png"></img>
          </div>
          <div class="data-count-item-right">
            <span class="data-count-item-right-num">{{ TodayCount }}</span>
            <span class="data-count-item-right-txt">今日异常已处理</span>
          </div>
        </div>

        <div class="data-count-item">
          <div class="data-count-item-left">
            <img src="../../../assets/home/weishouzhaohui.png"></img>
          </div>
          <div class="data-count-item-right">
            <span class="data-count-item-right-num">{{ status.UnsoldRecovered || 0 }}</span>
            <span class="data-count-item-right-txt">未售找回</span>
          </div>
        </div>

        <div class="data-count-item">
          <div class="data-count-item-left">
            <img src="../../../assets/home/yishouzhaohui.png"></img>
          </div>
          <div class="data-count-item-right">
            <span class="data-count-item-right-num">{{ status.SoldRecovered || 0 }}</span>
            <span class="data-count-item-right-txt">已售找回</span>
          </div>
        </div>

        <div class="data-count-item">
          <div class="data-count-item-left">
            <img src="../../../assets/home/weishouyichang.png"></img>
          </div>
          <div class="data-count-item-right">
            <span class="data-count-item-right-num">{{ status.UnsoldException || 0 }}</span>
            <span class="data-count-item-right-txt">未售异常</span>
          </div>
        </div>

        <div class="data-count-item">
          <div class="data-count-item-left">
            <img src="../../../assets/home/jinriyichangyichuli.png"></img>
          </div>
          <div class="data-count-item-right">
            <span class="data-count-item-right-num">{{ status.SoldAccompanied || 0 }}</span>
            <span class="data-count-item-right-txt">已售已赔</span>
          </div>
        </div>
      </div>
    </div>

    <!--查询form-->
    <el-form :model="queryParams" ref="queryForm" size="small">
      <el-row type="flex" class="rows">
        <el-col class="cols">
          <el-form-item prop="account">
            <el-input v-model="queryParams.account" placeholder="请输入账号" @keyup.enter.native="getList(1)"/>
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="orderNumber">
            <el-input v-model="queryParams.orderNumber" placeholder="请输入回收编号" @keyup.enter.native="getList(1)"/>
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="saleId">
            <el-input v-model="queryParams.saleId" placeholder="请输入销售编号" @keyup.enter.native="getList(1)"/>
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="abnormityReason">
            <el-input v-model="queryParams.abnormityReason" placeholder="请输入异常原因"
                      @keyup.enter.native="getList(1)"/>
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="dictCodeId">
            <el-select v-model="queryParams.dictCodeId" placeholder="请选择游戏品类" @change="getList(1)">
              <el-option v-for="item in gameList" :key="item.dictCode" :label="item.dictLabel"
                         :value="item.dictCode"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!--查询-->
      <div class="btns">
        <!--刷新-->
        <div class="wrap" @click="getList()">
          <img src="../../../assets/images/refresh.png"/>
        </div>

        <!--重置-->
        <div class="wrap" @click="resetQuery">
          <img src="../../../assets/images/search.png"/>
        </div>
      </div>
    </el-form>

    <!--账号状态查询-->
    <el-radio-group v-model="queryParams.problemType" @input="handleGame">
      <el-radio label="">全部</el-radio>
      <el-radio :label="item.val" v-for="(item,indx) in radioArr">{{ item.name }}</el-radio>
    </el-radio-group>

    <!--标题-->
    <el-row type="flex" justify="space-between" class="el-title">
      <el-col><p class="subtitle">销售管理列表</p></el-col>
      <el-button @click.native="handleExport" plain size="mini">导出</el-button>
    </el-row>

    <!--列表-->
    <el-table v-loading="loading" :data="managementList" @selection-change="handleSelectionChange" stripe>
      <el-table-column label="编号" align="center" min-width="80" fixed>
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="绑定手机" align="center" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.phoneNumber == null" style="color: red;">已解绑</span> <span
          v-else>{{ scope.row.phoneNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机编号" align="center" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.phoneCode == null" style="color: red;">暂无</span> <span
          v-else>{{ scope.row.phoneCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售渠道" align="center" prop="saleChannel">
        <template slot-scope="scope">
          <span> {{ scope.row.saleChannel ? scope.row.saleChannel : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售编号" align="center" prop="saleId">
        <template slot-scope="scope">
          <span> {{ scope.row.saleId ? scope.row.saleId : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" min-width="80">
        <template slot-scope="scope">
            <span v-if="scope.row.problemType == 'UnsoldRecovered'"
                  class="status status-unsold-recovered">未售找回</span>
          <span v-if="scope.row.problemType == 'UnsoldException'"
                class="status status-unsold-exception">未售异常</span>
          <span v-if="scope.row.problemType == 'SoldRecovered'" class="status status-sold-recovered">已售找回</span>
          <span
            v-if="scope.row.problemType == 'SoldException'" class="status status-sold-exception">已售异常</span> <span
          v-if="scope.row.problemType == 'SoldAccompanied'" class="status status-sold-exception">已售已赔</span> <span
          v-if="scope.row.problemType == 'SoldChangeBinding'"
          class="status status-sold-change-binding">已售未换绑</span>
        </template>
      </el-table-column>
      <el-table-column label="账号描述" min-width="200" align="center" class-name="description-cell">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top">
            <p class="hover-multi-line">{{ $line(scope.row.accountDescription) }}</p>
            <div slot="reference" class="hover-slot-line">
              {{ scope.row.accountDescription ? scope.row.accountDescription : '-' }}
            </div>
            <div style="text-align: center;">
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.accountDescription)">复制
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="账号" align="center" prop="account" min-width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span> {{ scope.row.account ? scope.row.account : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="密码" align="center" prop="password" min-width="120">
        <template slot-scope="scope">
          <span> {{ scope.row.password ? scope.row.password : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号编号" align="center" prop="identifying" min-width="100">
        <template slot-scope="scope">
          <span> {{ scope.row.identifying ? scope.row.identifying : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售金额" align="center" prop="saleAmount" min-width="100">
        <template slot-scope="scope">
          <span> {{ scope.row.saleAmount ? scope.row.saleAmount : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回收金额" align="center" prop="recycleAmount" min-width="100">
        <template slot-scope="scope">
          <span> {{ scope.row.recycleAmount ? scope.row.recycleAmount : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回收渠道" align="center" prop="recycleChannelName" min-width="100">
        <template slot-scope="scope">
          <span> {{ scope.row.recycleChannelName ? scope.row.recycleChannelName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回收客服" align="center" prop="recycleName" min-width="100">
        <template slot-scope="scope">
          <span> {{ scope.row.recycleName ? scope.row.recycleName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回收编号" align="center" min-width="100">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top">
            <p class="hover-multi-line">{{ $line(scope.row.orderNumber) }}</p>
            <div slot="reference" class="hover-slot-line">
              {{ scope.row.orderNumber ? scope.row.orderNumber : '-' }}
            </div>
            <div style="text-align: center;">
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.orderNumber)">复制
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="异常原因" align="center" prop="abnormityReason" min-width="200">
        <template slot-scope="scope">
            <span @click="changeRemark(scope.row)" v-if="scope.row.id != selectRemark"> {{
                scope.row.abnormityReason ? scope.row.abnormityReason : '-'
              }}</span>
          <input style="width: 100px;" v-else type="text" @blur="blurRemark(scope.row)"
                 v-model="form.abnormityReason">
        </template>
      </el-table-column>
      <el-table-column label="入库时间" align="center" prop="storageTime" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.storageTime ? parseTime(scope.row.storageTime, '{y}-{m}-{d}') : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="异常时间" align="center" prop="abnormityTime" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.abnormityTime ? scope.row.abnormityTime : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center" prop="createBy" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.createBy ? scope.row.createBy : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="190">
        <template slot-scope="scope">
          <!--待处理-->
          <div v-if="queryParams.problemType == 'WaiToDo'">
            <el-button slot="reference" size="mini" type="text" @click="handleGetInfo(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);">拉取信息</span>
            </el-button>
            <el-button slot="reference" size="mini" type="text" @click="handleCreateOrder()">
              <span style="color: rgba(83, 90, 244, 1);">创建订单</span>
            </el-button>
          </div>

          <!--处理完成-->
          <div v-else-if="queryParams.problemType == 'Accomplished'">
            <!--<el-button slot="reference" size="mini" type="text" v-hasPermi="['business:exception:completeCheckout']">-->
            <!--  <span style="color: rgba(83, 90, 244, 1);">查看</span>-->
            <!--</el-button>-->

            <el-button size="mini" type="text" @click="handleView(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">查看</span>
            </el-button>
          </div>

          <!--其他-->
          <div v-else>
            <el-button size="mini" type="text" @click="handleUpdate(scope.row,'恢复入库')"
                       v-hasPermi="['business:exception:returnStorage']">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px;">恢复入库</span>
            </el-button>

            <el-popconfirm v-if="scope.row.problemType == 'SoldException'" title="您确定完结出库吗？"
                           @confirm="submitFormNotation(scope.row)">
              <el-button slot="reference" size="mini" type="text" v-hasPermi="['business:exception:completeCheckout']">
                <span style="color: rgba(83, 90, 244, 1);">完结出库</span>
              </el-button>
            </el-popconfirm>
            <el-button v-else size="mini" type="text" @click="handleNotation(scope.row)"
                       v-hasPermi="['business:exception:completeCheckout']">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">完结出库 </span>
            </el-button>

            <el-button size="mini" type="text" @click="handleView(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">查看</span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination class="pagination" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList('')"/>

    <!-- 新增账号对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="myfroms">
        <div class="mytxt">
          <el-row>
            <el-col :span="8">
              <el-form-item label="游戏品类" prop="dictCodeId">
                <el-select filterable disabled v-model="form.dictCodeId" placeholder="请选择游戏品类"
                           @change="handleGameCategoryChange">
                  <el-option v-for="item in gameList" :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="区服" prop="region">
                <el-select filterable v-model="form.region" placeholder="请选择区服" :disabled="disabled">
                  <el-option filterable v-for="item in regionalServers" :key="item.value" :label="item.gameField"
                             :value="item.gameField"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收编号" prop="orderNumber">
                <el-input v-model="form.orderNumber" placeholder="请输入回收编号" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="账号" prop="account">
                <el-input disabled v-model="form.account" placeholder="请输入账号" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收渠道" prop="recycleChannelId">
                <el-select filterable v-model="form.recycleChannelId" placeholder="请选择回收渠道" :disabled="disabled">
                  <el-option v-for=" item  in  recycleChannelList " :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="账号描述" prop="accountDescription">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.accountDescription"
                          placeholder="请输入账号描述" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收金额" prop="recycleAmount">
                <el-input v-model="form.recycleAmount" placeholder="请输入回收金额" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="销售金额" prop="saleAmount">
                <el-input v-model="form.saleAmount" placeholder="请输入销售金额" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="form.problemType == 'SoldException' || form.problemType === 'SoldRecovered'">
              <el-form-item label="退款金额" prop="salesRefundAmount">
                <el-input v-model="form.salesRefundAmount" placeholder="请输入销售退款金额" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="绑定类目" prop="bindingChannelId">
                <el-select filterable @change="changeChannel" v-model="form.bindingChannelId" :disabled="disabled"
                           placeholder="请选择绑定类目">
                  <el-option v-for=" item  in  bindingChannelList " :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="绑定手机" prop="phoneId">
                <el-select filterable @change="changePhone" v-model="form.phoneId" placeholder="请选择绑定手机"
                           :disabled="disabled">
                  <el-option v-for=" item  in  phoneList " :key="item.phoneId" :label="item.phoneNumber"
                             :value="item.phoneId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="手机编号" prop="phoneCode">
                <el-input disabled v-model="form.phoneCode" placeholder="请先选择绑定手机号" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="换绑客服" prop="changeId">
                <el-select filterable v-model="form.changeId" placeholder="请选择换绑客服" :disabled="disabled">
                  <el-option v-for=" item  in  changeList " :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收客服" prop="recycleId">
                <el-select filterable v-model="form.recycleId" placeholder="请选择回收客服" :disabled="disabled">
                  <el-option v-for=" item  in  recycleList " :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="form.problemType == 'SoldException' || form.problemType === 'SoldRecovered'">
              <el-form-item label="收款账号" prop="collectionAccount">
                <el-input v-model="form.collectionAccount" placeholder="请输入收款账号" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.remark"
                          placeholder="请输入备注" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="上架编号" prop="shelfNumber">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.shelfNumber"
                          placeholder="请输入上架编号" :disabled="disabled"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-col :span="24">
                <el-form-item label="上传图片">
                  <el-row>
                    <el-col :span="3" v-for="(item,indx) in form.imagess" :key="indx" style="margin-bottom:10px;">
                      <div class="show-img">
                        <i class="el-icon-error icon" @click="handleDel(indx)"/>
                        <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.imagess"/>
                      </div>
                    </el-col>

                    <el-col :span="3">
                      <div class="wrap">
                        <el-upload :action="imgUrl + '/common/upload'" :show-file-list="false" multiple
                                   :disabled="disabled"
                                   :on-success="handleSuccess" :before-upload="beforeAvatarUpload">
                          <i class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <div class="mystatu">
          <p>属性信息</p>
          <div v-for="(child,ii) in result" :key="ii" class="render">
            <!--下拉框-->
            <el-form-item v-if="child.fieldType === 'select' && child && child.children && child.children.length > 0"
                          :label="child.gameField" :prop="'dropDown_'+child.id"
                          :rules="{required: child.isRequired==1?true:false,message:child.gameField + '不能为空',trigger:'change'}">
              <el-select filterable :disabled="disabled" v-model="form['dropDown_'+child.id]">
                <el-option v-for="(item,indx) in child.children" :key="indx" :label="item.gameField"
                           :value="parseInt(item.id)"/>
              </el-select>
            </el-form-item>

            <!--输入框-->
            <div style="display: flex; flex-wrap: wrap; gap: 10px;"
                 v-if="child && child.fieldType === 'input' && child.children && child.children.length > 0">
              <el-form-item v-for="item in child.children" :key="item.id" :label="item.gameField"
                            :prop="'inputValues_'+item.id"
                            :rules="{required: child.isRequired==1?true:false,message:item.gameField + '不能为空',trigger:'blur'}">
                <el-input :disabled="disabled" placeholder="请输入" v-model="form['inputValues_' + item.id]"></el-input>
              </el-form-item>
            </div>

            <!--radio 单选框-->
            <el-form-item v-if="child.fieldType === 'radio' && child && child.children && child.children.length > 0"
                          :label="child.gameField" :prop="'radioValues_'+child.id"
                          :rules="{required: child.isRequired==1?true:false,message:child.gameField +'不能为空',trigger:'change'}">
              <el-radio-group :disabled="disabled" v-model="form['radioValues_'+child.id]">
                <el-radio v-for="option in child.children" :key="option.id" :label="option.id">
                  {{ option.gameField }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <!--checkbox 多选框-->
            <el-form-item v-if="child && child.fieldType === 'checkbox' &&  child.children && child.children.length > 0"
                          :label="child.gameField" :prop="'checkbox_' + child.gameKey"
                          :rules="[{ type: 'array', required: child.isRequired == 1 ? true : false, message: '请至少选择一个' + child.gameField, trigger: 'change' }]">
              <el-checkbox-group v-model="form['checkbox_' + child.gameKey]"
                                 v-if="child.gameKey && form['checkbox_' + child.gameKey]">
                <el-checkbox v-for="item in child.children" :label="item.id">{{ item.gameField }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" v-if="!disabled">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 完结出库对话框 -->
    <el-dialog title="完结出库" :visible.sync="openNotation" width="850px" append-to-body :close-on-click-modal="false">
      <el-form ref="formNotation" :model="formNotation" :rules="rules" label-width="80px">
        <!-- 未售找回 -->
        <div v-if="formNotation.problemType == 'UnsoldRecovered' || formNotation.problemType == 'SoldAccompanied'">
          <el-form-item label="销售渠道" prop="salesChannel">
            <el-select filterable v-model="formNotation.salesChannel" placeholder="请选择销售渠道" :disabled="disabled">
              <el-option label="找回赔付" value="找回赔付"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="订单编号" prop="orderNumber">
            <el-input v-model="formNotation.orderNumber" placeholder="请输入销售编号" :disabled="disabled"/>
          </el-form-item>

          <el-form-item label="退款金额" prop="refundAmount">
            <el-input v-model="formNotation.refundAmount" placeholder="请输入销售金额" :disabled="disabled"/>
          </el-form-item>

          <el-form-item label="订单备注" prop="orderRemark">
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formNotation.orderRemark"
                      placeholder="请输入订单备注" :disabled="disabled"/>
          </el-form-item>

          <el-form-item label="处理人" prop="salesCustomerId">
            <el-select filterable v-model="formNotation.salesCustomerId" placeholder="请选择处理人"
                       :disabled="disabled">
              <el-option v-for=" item  in  sellList " :key="item.userId" :label="item.userName"
                         :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <!-- 已售找回 -->
        <div v-if="formNotation.problemType == 'SoldRecovered'">
          <el-form-item label="销售渠道" prop="salesChannel">
            <el-select filterable v-model="formNotation.salesChannel" placeholder="请选择销售渠道" :disabled="disabled">
              <el-option label="未追回" value="RecoveredNotSold"></el-option>
              <el-option label="已追回" value="RecoveredSold"></el-option>
              <el-option label="预赔付" value="PreCompensation"></el-option>
            </el-select>
          </el-form-item>
          <!-- 未追回 -->
          <div v-if="formNotation.salesChannel == 'RecoveredNotSold'">
            <el-row>
              <el-col :span="8">
                <el-form-item label="类型" prop="orderNumber">
                  <el-input disabled value="支出/收入" placeholder="请输入销售金额" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间" prop="createTime">
                  <el-input disabled v-model="formNotation.createTime" placeholder="请输入销售编号"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="类别" prop="category">
                  <el-input disabled v-model="formNotation.category" value="找回赔付" placeholder="请输入销售编号"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="游戏" prop="handler">
                  <el-input disabled v-model="formNotation.dictCodeName" placeholder="请输入账号" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="账号" prop="handler">
                  <el-input disabled v-model="formNotation.account" placeholder="请输入账号" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="回收渠道" prop="recycleChannelId">
                  <el-input disabled v-model="formNotation.recycleChannelName" placeholder="请输入账号"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="销售编号" prop="saleId">
                  <el-input disabled v-model="formNotation.saleId" placeholder="请输入销售金额" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="回收编号" prop="orderNumber">
                  <el-input disabled v-model="formNotation.orderNumber" placeholder="请输入销售金额"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="支出金额" prop="expenditureAccount">
                  <el-input v-model="formNotation.expenditureAccount" placeholder="请输入支出金额"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收入金额" prop="incomeAccount">
                  <el-input v-model="formNotation.incomeAccount" placeholder="请输入收入金额" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收款账号" prop="collectionAccount">
                  <el-input v-model="formNotation.collectionAccount" placeholder="请输入收款账号" :disabled="disabled"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="换绑客服" prop="changeName">
                  <el-input disabled v-model="formNotation.changeName" placeholder="请输入销售金额"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="销售客服" prop="salesCustomerName">
                  <el-input disabled v-model="formNotation.salesCustomerName" placeholder="请输入销售金额"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="回收客服" prop="recycleName">
                  <el-input disabled v-model="formNotation.recycleName" placeholder="请输入销售金额"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="上传凭证">
              <el-upload class="avatar-uploader" :action="$baseURL + '/common/upload'" :show-file-list="false"
                         :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :disabled="disabled">
                <img v-if="formNotation.images" :src="formNotation.images" class="avatar"> <i v-else
                                                                                              class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="备注" prop="orderRemark">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formNotation.orderRemark"
                        placeholder="请输入订单备注" :disabled="disabled"/>
            </el-form-item>
          </div>

          <!-- 预赔付 -->
          <div v-if="formNotation.salesChannel == 'PreCompensation'">
            <el-row>
              <el-col :span="8">
                <el-form-item label="类型" prop="orderNumber">
                  <el-input disabled value="支出/收入" placeholder="请输入销售金额" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间" prop="createTime">
                  <el-input disabled v-model="formNotation.createTime" placeholder="请输入销售编号"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="类别" prop="createTime">
                  <el-input disabled value="找回赔付" placeholder="请输入销售编号" :disabled="disabled"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="游戏" prop="handler">
                  <el-input disabled v-model="formNotation.dictCodeName" placeholder="请输入账号" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="账号" prop="handler">
                  <el-input disabled v-model="formNotation.account" placeholder="请输入账号" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="回收渠道" prop="recycleChannelId">
                  <el-input disabled v-model="formNotation.recycleChannelName" placeholder="请输入账号"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="支出金额" prop="expenditureAccount">
                  <el-input v-model="formNotation.expenditureAccount" placeholder="请输入销售金额"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="换绑客服" prop="changeName">
                  <el-input disabled v-model="formNotation.changeName" placeholder="请输入销售金额"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="回收客服" prop="recycleName">
                  <el-input disabled v-model="formNotation.recycleName" placeholder="请输入回收客服"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="收款账号" prop="collectionAccount">
                  <el-input v-model="formNotation.collectionAccount" placeholder="请输入收款账号" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="回收编号" prop="orderNumber">
                  <el-input disabled v-model="formNotation.orderNumber" placeholder="请输入销售金额"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 已售未换绑 -->
        <div v-if="formNotation.problemType == 'SoldChangeBinding'">
          <el-form ref="formNotation" :model="formNotation" :rules="rules" label-width="120px">

            <el-form-item label="销售渠道" prop="salesChannel">
              <el-select filterable v-model="formNotation.salesChannel" placeholder="请选择销售渠道"
                         :disabled="disabled">
                <el-option v-for="item in saleChannelList" :key="item.dictCode" :label="item.dictLabel"
                           :value="item.dictCode"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="销售编号" prop="orderNumber">
              <el-input v-model="formNotation.orderNumber" placeholder="请输入销售编号" :disabled="disabled"/>
            </el-form-item>

            <el-form-item label="销售金额" prop="saleAmount">
              <el-input v-model="formNotation.saleAmount" placeholder="请输入销售金额" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="换绑手机" prop="changePhone">
              <el-input v-model="formNotation.changePhone" placeholder="请输入换绑手机" :disabled="disabled"/>
            </el-form-item>

            <el-form-item label="订单备注" prop="orderRemark">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formNotation.orderRemark"
                        placeholder="请输入订单备注" :disabled="disabled"/>
            </el-form-item>

            <el-form-item label="销售客服" prop="salesCustomerId">
              <el-select filterable v-model="formNotation.salesCustomerId" placeholder="请选择销售客服"
                         :disabled="disabled">
                <el-option v-for=" item  in  sellList " :key="item.userId" :label="item.userName"
                           :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <!-- 未售异常 -->
        <div v-if="formNotation.problemType == 'UnsoldException'">
          <el-form-item label="销售渠道" prop="salesChannel">
            <el-select filterable v-model="formNotation.salesChannel" placeholder="请选择销售渠道" :disabled="disabled">
              <el-option label="账号出售" value="账号出售"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单编号" prop="orderNumber">
            <el-input v-model="formNotation.orderNumber" placeholder="请输入销售编号" :disabled="disabled"/>
          </el-form-item>
          <el-form-item label="退款金额" prop="refundAmount">
            <el-input v-model="formNotation.refundAmount" placeholder="请输入销售金额" :disabled="disabled"/>
          </el-form-item>
          <el-form-item label="订单备注" prop="orderRemark">
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formNotation.orderRemark"
                      placeholder="请输入订单备注" :disabled="disabled"/>
          </el-form-item>
          <el-form-item label="处理人" prop="handler">
            <el-select filterable v-model="formNotation.handler" placeholder="请选择销售客服" :disabled="disabled">
              <el-option v-for=" item  in  sellList " :key="item.userId" :label="item.userName"
                         :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelNotation">取 消</el-button>
        <el-button type="primary" @click="submitFormNotation()">确 定</el-button>
      </div>
    </el-dialog>

    <!--拉取信息-->
    <getInfo ref="getInfo" :gameList="gameList"></getInfo>

    <!--创建订单-->
    <createOrder ref="createOrder" :gameList="gameList" :saleChannelList="saleChannelList"></createOrder>
  </div>
</template>

<script>
import getInfo from "../components/getInfo.vue";
import createOrder from "../components/createOrder.vue";
import {
  addManagement,
  unboundPhonesByCategory
} from '@/api/business/staylnventory'
import {
  listManagement,
  getStatistics,
  returnStorage,
  completeCheckout,
  modifyExceptionCause,
  getWaitingToDoApi,
  getAccomplishedApi,
  completedList
} from '@/api/business/abnormal'
import {myMixins} from "@/mixins/index.js";
import env from "@/utils/config.js";

export default {
  components: {getInfo, createOrder},
  mixins: [myMixins],
  name: 'Management',
  data() {
    return {
      radioArr: [{
        name: '未售找回',
        val: 'UnsoldRecovered'
      }, {
        name: '未售异常',
        val: 'UnsoldException'
      }, {
        name: '已售找回',
        val: 'SoldRecovered'
      }, {
        name: '已售异常',
        val: 'SoldException'
      }, {
        name: '已售已赔',
        val: 'SoldAccompanied'
      }, {
        name: '待确认',
        val: 'WaiToDo'
      }, {
        name: '处理完成',
        val: 'Accomplished'
      }],
      imgUrl: '',//上传图片地址
      // 属性配置回显
      result: [],
      //选中的备注
      selectRemark: null,
      //状态数据
      TodayCount: '',
      status: {},
      dialogImageUrl: '',
      dialogVisible: false,
      //销售渠道
      saleChannelList: [],
      //库存状态列表
      stockStatusList: [],
      //绑定手机列表
      phoneList: [],
      //换绑客服
      changeList: [],
      //回收客服
      recycleList: [],
      //销售客服
      sellList: [],
      regionalServers: [],
      //二次实名
      secondaryRealNameList: [],
      //回收列表
      recycleChannelList: [],
      //渠道列表
      bindingChannelList: [],
      //区服列表
      regionList: [
        {label: '3936区', value: '3936'}
      ],
      //游戏列表
      gameList: [],
      activeGame: '',
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      managementList: [
        {}
      ],
      // 弹出层标题
      title: '',
      // 是否显示新增弹出层
      open: false,
      // 是否显示提号弹出层
      openNotation: false,
      // 是否显示转问题弹出层
      openProblem: false,
      //当前绑定的手机号和渠道
      bindingChannelId: '',
      phoneData: {
        phoneCode: null,
        phoneId: null,
        phoneNumber: null
      },
      // 查询参数
      queryParams: {
        problemType: '',
        pageNum: 1,
        pageSize: 10,
        accountDescription: null,
        recycleChannelId: null,
        account: null, // 账号
        saleId: null, // 销售编号
        abnormityReason: null, //异常原因
        status: null,
        orderNumber: null, // 回收编号
        dictCodeId: '',//游戏品类编号
      },
      // 表单参数
      form: {
        checkList: []
      },
      // 提号表单参数
      formNotation: {
        orderRemark: '未追回赔付订单'
      },
      disabled: false,
      // 表单校验
      rules: {
        bindingChannelId: [
          {required: true, message: '绑定类目不能为空', trigger: 'change'}
        ],
        phoneId: [
          {required: true, message: '绑定手机不能为空', trigger: 'change'}
        ],
        expenditureAccount: [
          {required: true, message: '支出金额不能为空', trigger: 'blur'}
        ],
        incomeAccount: [
          {required: true, message: '收入金额不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.imgUrl = env;
    this.getList()

    //查询游戏列字典
    this.getDicts('game_category').then(res => {
      this.gameList = res.data
    })
    //查询绑定渠道字典
    this.getDicts('binding_channel').then(res => {
      this.bindingChannelList = res.data
    })
    //查询回收渠道字典
    this.getDicts('recycle_channel').then(res => {
      this.recycleChannelList = res.data
    })
    //查询二次实名字典
    this.getDicts('secondary_real_name').then(res => {
      this.secondaryRealNameList = res.data
    })
    //查询状态字典
    this.getDicts('stock_status').then(res => {
      this.stockStatusList = res.data
    })
    //查询销售渠道
    this.getDicts('sale_channel').then(res => {
      this.saleChannelList = res.data
    })
    //查询回收客服
    this.passPost('recycle').then(res => {
      this.recycleList = res.data
    })
    //查询换绑客服
    this.passPost('change').then(res => {
      this.changeList = res.data
    })
    //查询销售客服
    this.passPost('sell').then(res => {
      this.sellList = res.data
    })
  },

  methods: {

    // 拉取信息
    handleGetInfo(item) {
      this.$refs.getInfo.handleOpen(item.account, item.id);
    },

    // 创建订单
    handleCreateOrder() {
      this.$refs.createOrder.handleOpen();
    },

    // 复制
    handleCopy(e) {
      const el = document.createElement('textarea');
      el.value = e;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      // 通知用户已复制
      this.$message({
        message: '复制成功！',
        type: 'success'
      });
    },

    // 后边添加上传图片
    handleSuccess(res, file, fileList) {
      if (!Array.isArray(this.form.imagess)) {
        this.$set(this.form, 'imagess', []);
      }
      this.form.imagess.push(res.url);
    },

    // 删除照片
    handleDel(indx) {
      this.form.imagess.splice(indx, 1);
    },

    // 游戏品类切换
    handleGameCategoryChange() {
      this.regionalServers = [];
      this.listDictData({
        dictCodeId: this.form.dictCodeId
      });
    },

    //离开备注框
    blurRemark(row) {
      this.selectRemark = null
      modifyExceptionCause(this.form).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },

    //点击备注框
    changeRemark(row) {
      this.selectRemark = row.id
      this.form = {...row}
    },

    handleAvatarSuccess(response, file) {
      // 假设服务器响应的数据中包含了文件路径 'url'
      this.form.images = response.url // 更新 form.image 为服务器返回的 URL
    },

    beforeAvatarUpload(file) {
      const isJPEG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const jsJPG = file.type === 'image/jpg'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPEG && !isPNG && !jsJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }
      return true;
    },

    //选中分类事件
    changeChannel(value) {
      this.form.phoneId = null
      this.form.phoneCode = null
      this.bindingChannelList.forEach(item => {
        if (item.dictCode == value) {
          unboundPhonesByCategory(item.dictValue)
            .then(res => {
              this.phoneList = res.data
              if (this.bindingChannelId == value) {
                this.phoneList.unshift(this.phoneData)
              }
            })
          return
        }
      })
    },

    //切换Tab
    handleGame(tab) {
      this.queryParams.problemType = tab;
      this.getList(1);
    },

    /** 查询列表 */
    getList(num) {
      if (num) this.queryParams.pageNum = num;
      this.loading = true;
      if (this.queryParams.problemType == 'WaiToDo') {//待处理
        getWaitingToDoApi(this.queryParams).then(res => {
          this.managementList = res.rows
          this.total = res.total
          this.loading = false
        })
      } else if (this.queryParams.problemType == 'Accomplished') {//处理完成
        completedList(this.queryParams).then(res => {
          this.managementList = res.rows
          this.total = res.total
          this.loading = false
        })
      } else {
        getStatistics().then(res => {
          this.status = res.data
          this.TodayCount = res.data.TodayCount
        });
        listManagement(this.queryParams).then(response => {
          this.managementList = response.rows
          this.total = response.total
          this.loading = false
        })
      }
    },

    //新增 取消按钮
    cancel() {
      this.open = false;
      this.disabled = false;
      this.reset()
    },

    //新增 表单重置
    reset() {
      this.form = {
        phoneCode: null,
        phoneId: null,
        imagess: [],
        checkList: []
      }
      // this.resetForm('form')
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '新增账号'
    },

    /** 新增 确认提交 */
    submitForm() {
      let dropDownMap = {}, inputValuesObj = {}, radioSelectionsObj = {}, info = {}, checkboxArr = [];
      for (var key in this.form) {
        // 下拉框
        if (key.indexOf('dropDown') > -1) {
          dropDownMap[key.split('_')[1]] = this.form[key];
        }

        // 输入框
        if (key.indexOf('inputValues') > -1) {
          inputValuesObj[key.split('_')[1]] = this.form[key]
        }

        // 单选框
        if (key.indexOf('radioValues') > -1) {
          radioSelectionsObj[key.split('_')[1]] = this.form[key]
        }

        // 多选框
        if (key.indexOf('checkbox') > -1) {
          info[key] = this.form[key];
          checkboxArr = checkboxArr.concat(this.form[key])
        }
      }

      let attr = {
        radioSelections: radioSelectionsObj,
        dropDown: dropDownMap,
        inputValues: inputValuesObj,
        checkbox: info,
        checkList: checkboxArr
      }
      this.form.attribute = attr;
      this.form.answer = JSON.stringify(attr);

      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            returnStorage(this.form).then(response => {
              this.$modal.msgSuccess('恢复入库成功')
              this.open = false
              this.getList()
            })
          } else {
            addManagement(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },

    //提号 取消按钮
    cancelNotation() {
      this.openNotation = false
      this.resetNotation()
    },

    //提号 表单重置
    resetNotation() {
      this.formNotation = {}
      this.resetForm('formNotation')
    },

    /** 提号按钮操作 */
    handleNotation(row) {
      this.resetNotation()
      this.openNotation = true
      this.formNotation = {
        ...row,
        orderRemark: '未追回赔付订单',
        category: '找回赔付',
        saleAmount: row.saleAmount

      }
    },

    // 查看
    handleView(item) {
      this.disabled = true;
      this.handleUpdate(item, '查看');
    },

    /** 提号 确认提交 */
    submitFormNotation(row) {
      if (row) {
        this.formNotation = {
          ...row
        }
      }
      completeCheckout(this.formNotation).then(response => {
        this.$modal.msgSuccess('成功')
        this.openNotation = false
        this.getList()
      })
    },

    //转问题 取消按钮
    cancelProblem() {
      this.openProblem = false
      this.resetProblem()
    },
    //转问题 表单重置
    resetProblem() {
      this.formProblem = {}
      this.resetForm('formProblem')
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList(1)
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('business/stock/export', {
        ...this.queryParams
      }, `management_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  > p {
    font-size: 18px;
    font-weight: 400;
    color: rgba(17, 38, 60, 1);
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 10px;
    margin-bottom: 15px;
  }


  .header-count {
    padding: 20px 20px 0;
    border-radius: 16px;
    background-color: #F5F6FB;
    margin-bottom: 20px;

    p {
      font-size: 16px;
      font-weight: bold;
      color: rgba(17, 38, 60, 1);
      border-left: 4px solid #116BFF;
      padding-left: 10px;
      margin: 0 0 20px 0;
      color: #3D3D3D;
    }

    .data-count {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .data-count-item {
        flex: 1;
        display: flex;
        align-items: center;
        //width: 19%;
        min-width: 260px;
        height: 129px;
        border-radius: 16px;
        background: #FFFFFF;
        box-shadow: 0px 8px 13px 0px rgba(163, 187, 226, 0.19);
        padding-left: 30px;
        box-sizing: border-box;
        margin-right: 1%;
        margin-bottom: 20px;

        .data-count-item-left {
          margin-right: 20px;

          img {
            width: 78px;
            height: 78px;
            border-radius: 12px;
            box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
          }
        }

        .data-count-item-right {
          display: flex;
          flex-direction: column;

          .data-count-item-right-num {
            font-size: 30px;
            font-weight: 900;
            color: #3D3D3D;
          }

          .data-count-item-right-txt {
            font-size: 14px;
            color: #A5AAB3;
          }
        }
      }
    }
  }

  ::v-deep.el-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 10px;
    border-radius: 16px 16px 0 0;
    background: #3A84FF;

    .rows {
      flex-wrap: wrap;
      width: 82%;

      .cols {
        width: 200px;
        margin: 0 10px 10px 0;

        .el-form-item {
          margin-bottom: 0 !important;
        }
      }

      .el-range-input {
        color: #0060FF;
        font-size: 12px;
      }

      .el-input__inner {
        border: 0;
        font-size: 12px;
        width: 200px;
        height: 38px;
        color: #0060FF;
      }
    }

    .btns {
      display: flex;

      ::v-deep.el-button {
        background-color: #fff;
        margin-left: 12px;
        color: #3380FD;

        .el-icon-plus {
          &::after {
            content: "";
            font-weight: bold;
          }
        }
      }

      .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: #FFFFFF;
        border: 1px solid #116BFF;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }

  /*radio*/
  .el-radio-group {
    width: 100%;
    padding: 20px 20px 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0 0 16px 16px;
    margin-bottom: 28px;

    .el-radio {
      margin-bottom: 8px;
    }

    ::v-deep.el-radio__inner {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      background: #FAFBFC;
      border: 1px solid #D8E4EF;
      overflow: hidden;
      text-align: center;
      line-height: 32px;

      &::after {
        content: "☑️";
        display: block;
        color: #1890FF;
        font-size: 20px;
        width: 30px;
        height: 30px;
        background: #fff;
      }
    }
  }

  /*标题*/
  .el-title {
    .subtitle {
      font-size: 16px;
      font-weight: 500;
      color: rgba(17, 38, 60, 1);
      border-left: 4px solid #116BFF;
      padding-left: 10px;
      margin: 0 0 20px 0;
      line-height: normal;
    }

    .el-button {
      width: 60px;
      height: 34px;
      border-radius: 8px;
      background: #116BFF;
      color: #fff;
      text-align: center;
      font-size: 14px;
    }
  }

  /*列表*/
  ::v-deep.el-table {
    border-radius: 16px 16px 0 0;

    th {
      height: 50px;
      background: #488DFE;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #fff;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    td {
      height: 50px;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #3D3D3D;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    .el-table__body tr {
      &:nth-child(odd) {
        background-color: #FEFEFE;
      }

      &:nth-child(even) {
        background-color: #F8FAFE;
      }
    }

    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        height: 10px;
      }

      &::-webkit-scrollbar-track {
        background-color: #E4E8F5;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #3380FD;
      }
    }

    .status {
      display: block;
      width: 54px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      opacity: 0.8;
      border-radius: 4px;
      font-size: 12px;
      transition: opacity 0.3s ease-in-out;
    }

    .normal {
      color: #00B3A7;
      background-color: #E0F7FA;
    }

    .tradingIn {
      color: #FFA500;
      background-color: #ffeac9;
    }

    .soldOut {
      color: #FF0000;
      background-color: #ffdada;
    }

    .abnormal {
      color: #FF00FF;
      background-color: #FFE4FF;
    }

    .cancelled {
      color: #a19f9f;
      background-color: #ececec;
    }
  }

  /*分页*/
  .pagination {
    background-color: transparent !important;

    ::v-deep.el-pagination {
      display: flex;
      align-items: center;

      .number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 8px;
      }

      .el-pager > .el-icon {
        height: 40px;
        width: 40px;
        background: #fff;
        line-height: 40px;
        border-radius: 8px;
      }
    }
  }
}

::v-deep .el-dialog {
  width: 849px;
  opacity: 1;
  border-radius: 30px;
  background: rgba(255, 255, 255, 1);

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  p {
    font-size: 18px;
    color: rgba(17, 38, 60, 1);
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 10px;
    margin: 0 0 15px 0;
  }

  .el-input {
    width: 165px;

    .el-input__inner {
      width: 165px;
      border: 1px solid rgba(127, 127, 213, 0.5);
      border-radius: 10px;
    }
  }

  .el-input-number {
    width: 165px;

    .el-input {
      width: 165px;

      .el-input__inner {
        width: 165px;
        border: 1px solid rgba(127, 127, 213, 0.5);
        border-radius: 0px;
      }
    }
  }

  .el-dialog__title {
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 8px;
  }
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #c1c1c1;
  width: 100%;
  height: 90px;
  cursor: pointer;

  div {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  ::v-deep.el-upload {
    width: 100%;
    height: 100%;
  }

  .avatar-uploader-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}

.show-img {
  position: relative;
  display: flex;
  margin-right: 8px;
  height: 90px;

  .icon {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 20px;
    z-index: 1;
    cursor: pointer;
  }
}
</style>
